<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('用户管理列表')"/>
</head>

<body class="gray-bg">
<div>
    <div class="left3 col-sm-3">
        <!-- 近30日充值 -->
        <div class="ibox float-e-margins" style="margin-bottom: 55px">
            <div class="ibox-title">
                <h3><img th:src="@{/img/icon2.png}" width="22px" height="26px">近30日充值</h3>
                <div class="stat-percent font-bold text-success">465462元</div>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-bar-chart-register" style="height: 270px;"></div>
            </div>
        </div>
        <!-- 近30日消费 -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h3><img th:src="@{/img/icon3.png}" width="22px" height="26px">近30日消费</h3>
                <div class="stat-percent font-bold text-success">465462元</div>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-bar-chart-consume" style="height: 270px;"></div>
            </div>
        </div>
    </div>
    <div class="col-sm-5">
        <!-- 累计机构数 -->
        <div class="num-box">
            <div class="num-top" id="num-boxVal">
            </div>
            <div class="num-bottom">
                <div class="num-bottom-span">累计机构数</div>
            </div>
        </div>
        <!--  地图  -->
        <div id="echarts-bar-chart-map" style="height: 400px;position: relative;top: -70px;"></div>
        <!-- 统计数 -->
        <div class="num-poll-box">
            <div class="num-poll-box-item">
                <span class="num-poll-box-item-top" style="margin-bottom: 25px">当前员工数</span>
                <span class="num-poll-box-item-bottom">45620人</span>
            </div>
            <div class="num-poll-box-item">
                <span class="num-poll-box-item-top" style="margin-bottom: 25px">当前认证数</span>
                <span class="num-poll-box-item-bottom">45620人</span>
            </div>
        </div>
    </div>
    <div class="right3 col-sm-3">
        <div class="ibox float-e-margins" style="margin-bottom: 0">
            <div class="ibox-title">
                <h3><img th:src="@{/img/icon1.png}" width="22px" height="26px">今日登记</h3>
                <div class="stat-percent font-bold text-success">465462条</div>
            </div>
            <!-- 今日数据 -->
            <div class="ibox-content" id="container" style="padding:0"></div>
        </div>
        <div class="ibox float-e-margins">
            <div class="ibox-title" style="padding:0">
                <h3>历史登记</h3>
                <div class="stat-percent font-bold text-success"><h3></h3></div>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-bar-chart-last"></div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: sparkline-js"/>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('dxb:userInfo:edit')}]];
    var removeFlag = [[${@permission.hasPermi('dxb:userInfo:remove')}]];
    var prefix = ctx + "djb/registry";

    $(document).ready(function () {

        //  图标显示的位置
        let dgwicon =
            "image://";
        let img2 = "image://"

        var barChart_map = echarts.init(document.getElementById("echarts-bar-chart-map"));
        // 获取地图JSON文件
        $.getJSON("/djb/map.json", function (data) {
            // console.log(data, 'data')
            echarts.registerMap('china', data);
            var geoCoordMap = {
                '台湾': [121.5135, 25.0308],
                '黑龙江': [127.9688, 45.368],
                '内蒙古': [110.3467, 41.4899],
                "吉林": [125.8154, 44.2584],
                '北京市': [116.4551, 40.2539],
                "辽宁": [123.1238, 42.1216],
                "河北": [114.4995, 38.1006],
                "天津": [117.4219, 39.4189],
                "山西": [112.3352, 37.9413],
                "陕西": [109.1162, 34.2004],
                "甘肃": [103.5901, 36.3043],
                "宁夏": [106.3586, 38.1775],
                "青海": [101.4038, 36.8207],
                "新疆": [87.9236, 43.5883],
                "西藏": [91.11, 29.97],
                "四川": [103.9526, 30.7617],
                "重庆": [108.384366, 30.439702],
                "山东": [117.1582, 36.8701],
                "河南": [113.4668, 34.6234],
                "江苏": [118.8062, 31.9208],
                "安徽": [117.29, 32.0581],
                "湖北": [114.3896, 30.6628],
                "浙江": [119.5313, 29.8773],
                "福建": [119.4543, 25.9222],
                "江西": [116.0046, 28.6633],
                "湖南": [113.0823, 28.2568],
                "贵州": [106.6992, 26.7682],
                "云南": [102.9199, 25.4663],
                "广东": [113.12244, 23.009505],
                "广西": [108.479, 23.1152],
                "海南": [110.3893, 19.8516],
                '上海': [121.4648, 31.2891],

            };
            var data = [
                {name: "北京", value: 199},
                {name: "天津", value: 42},
                // {name: "河北", value: 102},
                // {name: "山西", value: 81},
                {name: "内蒙古", value: 47},
                // {name: "辽宁", value: 67},
                // {name: "吉林", value: 82},
                // {name: "黑龙江", value: 123},

            ];

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            option = {
                backgroundColor: 'transparent', // 背景色设置透明
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {},
                },
                geo: [{
                    map: 'china',
                    layoutSize: '120%', // 地图大小为容器的 80%
                    layoutCenter: ['50%', '50%'], // 地图居中
                    show: true,
                    roam: true,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#105693',
                            borderColor: "#c0f3fb",
                            borderWidth: 2,
                            // borderColor: '#0a53e9',//线
                            // shadowColor: '#092f8f',//外发光
                            // borderColor: "rgba(65, 214, 255,1)",
                            shadowColor: "#8cd3ef",
                            shadowBlur: 20
                        },
                        emphasis: {
                            // areaColor: 'rgba(5,21,35,0.1)',//悬浮区背景
                            areaColor: 'rgb(30,169,207)',
                        }
                    }
                }],

                series: [
                    //点
                    {

                        name: '圆圈',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        // zoom: 2.2, // 缩放级别，大于 1 表示放大，小于 1 表示缩小
                        data: convertData(
                            data.sort(function (a, b) {
                                return b.value - a.value;
                            }).slice(0, 10)
                        ),
                        symbolSize: 8,
                        showEffectOn: 'render',
                        symbolOffset: [0, 0],
                        rippleEffect: {
                            brushType: 'stroke',
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false,
                                fontSize: "10"
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#e6b528',
                                shadowBlur: 10,
                                shadowColor: '#fff',
                            },
                        },
                        zlevel: 1,

                    },
                    //定位图片
                    {
                        name: "定位坐标",
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: dgwicon,
                        symbolSize: [33, 38],
                        symbolOffset: [0, -10],
                        data: convertData(
                            data.sort(function (a, b) {
                                return b.value - a.value;
                            }).slice(0, 10)
                        ),
                        label: {
                            normal: {
                                show: false,
                                formatter: function (params) {
                                    // 只显示前 2 个数据的标签
                                    if (params.dataIndex < 2) {
                                        return params.name;
                                    }
                                    return ''; // 其他数据不显示标签
                                    // return params.name;
                                },
                                position: "right",
                                color: "#fff",
                                fontSize: "8"
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#4bbbb2",
                                borderWidth: 2,
                                borderColor: "#b4dccd"
                            }
                        }
                    }, {
                        name: "显示lable",
                        type: 'scatter',
                        coordinateSystem: 'geo',

                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    // console.log("params===>", params)
                                    // 只显示前 2 个数据的标签
                                    if (params.dataIndex < 2) {
                                        var value = params.value[2];

                                        var text = `${params.name} ${value}个`;
                                        return text;
                                    }
                                    return ''; // 其他数据不显示标签
                                },
                                color: '#fff',
                                rich: {
                                    fline: {
                                        padding: [0, 25],
                                        color: '#fff',
                                        textShadowColor: '#030615',
                                        textShadowBlur: '0',
                                        textShadowOffsetX: 1,
                                        textShadowOffsetY: 1,
                                        fontSize: 8,
                                        fontWeight: 400,
                                    },
                                    tline: {
                                        padding: [6, 15],
                                        color: '#fff',
                                        fontSize: 10,
                                    },
                                },
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            color: '#00FFF6',
                        },
                        symbol: img2,
                        symbolSize: [100, 30],
                        symbolOffset: [0, -35],
                        z: 999,
                        data: convertData(data),
                    }


                ]
            };

            // 赋值
            barChart_map.setOption(option);
        });
        // 近30日充值
        var barChart_register = echarts.init(document.getElementById("echarts-bar-chart-register"));
        barChart_register.setOption({
            title: {
                text: "元",
                textStyle: {
                    color: "#465683",
                    fontSize: 12
                },
            },
            grid: {
                top: 30,
                left: 30,
                right: 30,
                bottom: 30,
                containLabel: true,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
                backgroundColor: "rgba(74, 130, 253, 0.5)",
                borderColor: "rgba(95, 143, 250, 0.4)",
                textStyle: {
                    color: "#FFF",
                },
            },
            xAxis: {
                type: "category",
                data: ['1号', '4号', '8号', '12号', '16号', '20号', '今日'],
                axisLine: {
                    lineStyle: {
                        color: "rgba(95, 143, 250,0.4)", // x轴线颜色
                    },
                },
                axisTick: {
                    show: false, // 是否显示x轴的刻度
                },
                axisLabel: {
                    interval: 0,
                    color: "#465683",
                    fontSize: 12,
                },
                boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
            },
            yAxis: {
                type: "value",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: "#465683",
                    fontSize: 12,
                    formatter: function (value) {
                        return value + "";
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(95, 143, 250,0.2)",
                    },
                },
            },
            series: [
                {
                    name: "",
                    type: "line",
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#5F8FFA",
                            },
                            {
                                offset: 1,
                                color: "rgba(255,255,255,0.1)",
                            },
                        ]),
                    },
                    lineStyle: {
                        width: 2,
                        color: "#5F8FFA",
                    },
                    // 设置节点样式
                    showSymbol: false,
                    symbol: 'circle', // 可以选择 circle, diamond, pin 等
                    symbolSize: 0, // 节点大小
                    itemStyle: {
                        color: "#FFFFFF", // 节点颜色
                    },
                    data: [500, 560, 800, 1500, 600, 900, 700], // Y 轴数据
                },
            ]
        })
        // 近30日消费
        var barChart_consume = echarts.init(document.getElementById("echarts-bar-chart-consume"));
        barChart_consume.setOption({
            title: {
                text: "元",
                textStyle: {
                    color: "#465683",
                    fontSize: 12
                },
            },
            grid: {
                top: 30,
                left: 30,
                right: 30,
                bottom: 30,
                containLabel: true,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
                backgroundColor: "rgba(74, 130, 253, 0.5)",
                borderColor: "rgba(95, 143, 250, 0.4)",
                textStyle: {
                    color: "#FFF",
                },
            },
            xAxis: {
                type: "category",
                data: ['1号', '4号', '8号', '12号', '16号', '20号', '今日'],
                axisLine: {
                    lineStyle: {
                        color: "rgba(95, 143, 250,0.4)", // x轴线颜色
                    },
                },
                axisTick: {
                    show: false, // 是否显示x轴的刻度
                },
                axisLabel: {
                    interval: 0,
                    color: "#465683",
                    fontSize: 12,
                },
                boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
            },
            yAxis: {
                type: "value",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: "#465683",
                    fontSize: 12,
                    formatter: function (value) {
                        return value + "";
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(95, 143, 250,0.2)",
                    },
                },
            },
            series: [
                {
                    name: "",
                    type: "line",
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#5F8FFA",
                            },
                            {
                                offset: 1,
                                color: "rgba(255,255,255,0.1)",
                            },
                        ]),
                    },
                    lineStyle: {
                        width: 2,
                        color: "#5F8FFA",
                    },
                    // 设置节点样式
                    showSymbol: false,
                    symbol: 'circle', // 可以选择 circle, diamond, pin 等
                    symbolSize: 0, // 节点大小
                    itemStyle: {
                        color: "#FFFFFF", // 节点颜色
                    },
                    data: [1000, 1120, 1600, 1200, 1300, 1800, 1100], // Y 轴数据
                },
            ]
        })
        // 历史登记
        var barChart_last = echarts.init(document.getElementById("echarts-bar-chart-last"));
        barChart_last.setOption({
            title: {
                text: "元",
                textStyle: {
                    color: "#465683",
                    fontSize: 12
                },
            },
            grid: {
                top: 30,
                left: 30,
                right: 30,
                bottom: 30,
                containLabel: true,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
                backgroundColor: "rgba(74, 130, 253, 0.5)",
                borderColor: "rgba(95, 143, 250, 0.4)",
                textStyle: {
                    color: "#FFF",
                },
            },
            xAxis: {
                type: "category",
                data: ['1号', '4号', '8号', '12号', '16号', '20号', '今日'],
                axisLine: {
                    lineStyle: {
                        color: "rgba(95, 143, 250,0.4)", // x轴线颜色
                    },
                },
                axisTick: {
                    show: false, // 是否显示x轴的刻度
                },
                axisLabel: {
                    interval: 0,
                    color: "#465683",
                    fontSize: 12,
                },
                boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
            },
            yAxis: {
                type: "value",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: "#465683",
                    fontSize: 12,
                    formatter: function (value) {
                        return value + "";
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(95, 143, 250,0.2)",
                    },
                },
            },
            series: [
                {
                    name: "",
                    type: "line",
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#5F8FFA",
                            },
                            {
                                offset: 1,
                                color: "rgba(255,255,255,0.1)",
                            },
                        ]),
                    },
                    lineStyle: {
                        width: 2,
                        color: "#5F8FFA",
                    },
                    // 设置节点样式
                    showSymbol: false,
                    symbol: 'circle', // 可以选择 circle, diamond, pin 等
                    symbolSize: 0, // 节点大小
                    itemStyle: {
                        color: "#FFFFFF", // 节点颜色
                    },
                    data: [1100, 900, 1600, 1100, 1300, 1600, 1100], // Y 轴数据
                },
            ]
        })


        // barChart_map.setOptions([])

    });

    $(function () {

        // 今日登记
        // 获取所有 class 为 "today" 的元素
        // setTimeout(() => {
        const arr = [{
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "史蒂夫",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }, {
            "dateTime": "2025年3月6日10:20:16",
            "licensePlate": "鲁B12345",
        }]
        const container = document.getElementById('container');
        // 遍历每个元素
        arr.forEach(item => {
            const html = ` <div class="today">
                         <div>
                         <img src="../img/icon4.png" width="22px" height="26px" style="margin-right: 5px">
                         <span>${item.dateTime}</span>
                    </div>
                    <span>${item.licensePlate}</span> </div>`
            container.innerHTML += html;
        })

        // 遍历动态生成的内容
        const todayElements = document.querySelectorAll('.today');
        todayElements.forEach((element, index) => {
            const dateTime = element.querySelector('div span').textContent;
            const licensePlate = element.querySelector('div + span').textContent;
            // console.log(`第 ${index + 1} 项：`);
            // console.log(`日期时间：${dateTime}`);
            // console.log(`车牌号：${licensePlate}`);
            // console.log('-------------------');
        });
        // }, 1000)
        const num = [1, 6, 9, 8, 0, 0]
        const numVal = document.getElementById("num-boxVal")
        for (let i = 0; i < num.length; i++) {
            const html = `<div class="num-top-item">${num[i]}</div>`
            numVal.innerHTML += html
        }


    })
</script>
</body>
</html>
<style>
    /*公共背景图*/
    .gray-bg {
        background: url(../img/bg.png) !important;
        width: 100%;
        height: 100%;
    }

    .col-sm-5 {
        width: 39.666667%;
    }

    .ibox-title {
        background: url(../img/zu.png) no-repeat;
        background-size: 100%;
        padding: 5px 25px 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ibox, .ibox-content {
        background: transparent !important;
    }

    .ibox-content {
        background: linear-gradient(0deg, #DAE9FA 39%, #C1D5EE 100%);
    }

    h3 {
        font-family: HelloFont WenYiHei;
        font-weight: 400;
        font-size: 20px;
        color: #363C49;
        font-style: italic;
    }

    .stat-percent {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20px;
        color: #363C49;
        font-style: italic;
        margin-bottom: 10px;
    }

    .today {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px 0;
        box-sizing: border-box;
        background: rgba(214, 232, 249, 1);
    }

    .num-box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        background: url(../img/banner2.png) no-repeat;
        background-size: 100%;
        /*height: 80px;*/
        width: 100%;
        position: relative;
        margin-top: 50px;
    }

    .num-top-item {
        width: 70px;
        height: 84px;
        background: rgba(60, 202, 255, 0.1);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: ZhengQingKeHuangYouTi;
        font-size: 72px;
        color: #1B3D65;
    }

    .num-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #FFFFFF;
        position: relative;
    }

    .num-bottom-span {
        position: absolute;
        bottom: 105px;
    }

    .num-top {
        display: flex;
        align-items: center;
        position: relative;
        top: -50px;
        justify-content: space-around;
        margin: 0 auto 100px;
        width: 85%;
    }

    /* 统计数 */
    .num-poll-box {
        display: flex;
        justify-content: space-between;
        position: relative;
        bottom: 25px;
    }

    .num-poll-box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: url(../img/jx.png) no-repeat;
        background-size: 100%;
        padding: 42px 92px;
    }

    .num-poll-box-item-top {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #465683;
    }

    .num-poll-box-item-bottom {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 30px;
        color: #465683;
    }
</style>
